<?php include("/includes/header.php") ?>
<?php include("/includes/sidebar.php") ?>

<style type="text/css">
	.tanggal-report {
		cursor: pointer;
	}
	.graph-detail {
		font-size: 18px;
	}
</style>

<div class="content row-fluid"> 
	<div class="span12 table-placer report-filter-placer">
		<div class="alert alert-info"><h4>Food and Beverage Sale</h4></div>
		<fieldset class="filter-placer-field">
			<form id="filter-form" class="form-inline">
				<div class="pull-left">
					<select id="filter-type">
						<option value="*">---Choose Date Format---</option>
						<option value="monthviewrestaurant" data-format="yyyy-m" data-min-view="months">Month</option>
						<option value="yearviewrestaurant" data-format="yyyy" data-min-view="years">Year</option>
					</select>
				</div>
				<div class="span2">
					<input placeholder="Choose date" type="text" class="tanggal-report span12" id="datepick" name="datepick" readonly="" disabled>
				</div>
				<div class="span2">
					<button type="submit" class="btn btn-primary f2" id="check-filter" disabled>Submit (F2)</button>
				</div>
			</form>
		</fieldset>
		
		<div id="result-content">
			<fieldset class="result-placer-field">
				<ul class="nav nav-tabs" id="tab-view">
				  <li class="active"><a href="#table-view-placer" data-toggle="tab" id="tab-satu"><i class="fa fa-table"></i> Table View</a></li>
				  <li><a href="#graph-view-placer" data-toggle="tab"><i class="fa fa-bar-chart-o"></i> Graph View</a></li>
				  <li><a href="#detail-view-placer" data-toggle="tab"><i class="fa fa-list-alt"></i> Detail</a></li>
				</ul>

				<div class="tab-content" style="background-color:#fff;">
          <div class="tab-pane fade in active" id="table-view-placer">
            <table class="table report-table-list table-bordered" id="data_table">
							
						</table>
          </div>

          <div class="tab-pane fade" id="graph-view-placer">
          	<div class="row-fluid">
        			<p id="graph-notification" class="alert alert-error">
								No graph result shown.
							</p>
          		<div class="span11">
          			<figure id="graph"></figure>
          		</div>
          		<div class="span4 graph-detail">
          		</div>
          	</div>
          </div>

          <div class="tab-pane fade" id="detail-view-placer">
        		<button class="btn btn-primary pull-right" id="print-out"><i class="fa fa-print"></i> Print as PDF</button><br><br>
          	<table class="table report-table-list table-bordered" id="data_table">
							<thead>
								<tr>
									<th class="al_center" valign="middle" width="10%">No</th>
									<th class="al_center" valign="middle" width="50%">Menu Name</th>
									<th class="al_center" valign="middle" width="20%">Price</th>
									<th class="al_center" valign="middle" width="10%">Quantity</th>
									<th class="al_center" valign="middle" width="20%">Amount</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
          </div>
        </div>
			</fieldset>
		</div>
		<p id="filter-notification" class="alert alert-error">
			No result, please fix your search query.
		</p>
	</div>
</div>

<div class="footer">
</div>

<?php include("/includes/footer.php") ?>   

<script type="text/javascript">
	var cek_modal = 0;

	$(function () {
    $('#tab-view a:first').tab('show');
  })

  function cekModalManager(){
  	if (cek_modal==2) {
  		setTimeout(function(){
				$('body').modalmanager("loading");	
			}, 300);
			$('#result-content').show();
			cek_modal = 0;
  	};
  }

	$(document).ready(function() {
		var act = $('#filter-type').val();

		$('#graph-notification').hide();
		$('#filter-notification').hide();
		$('#result-content').hide();

		$('#datepick').datepicker();

		$('#filter-type').change(function(event) {
			/* Act on the event */
			var that = $(this);
			var optionDate = that.find("option:selected");
			act = that.val();
			$('#datepick').datepicker("remove");
			$('#datepick').val("");
			if (that.val() != '*') {
				$('#check-filter').removeAttr('disabled');
				$('#datepick').removeAttr('disabled');
				$('#datepick').datepicker({
					format: optionDate.data("format"),
					minViewMode: optionDate.data("min-view"),
					autoclose: true
				});
			}else{
				$('#check-filter').attr('disabled', 'disabled');
				$('#datepick').attr('disabled', 'disabled');
			}
			$('.tanggal-report').focus();
		});

		//---------------------------DOWNLOAD PDF---------------------------
		$("#print-out").click(function(){
			var downUrl = "includes/pdf_restaurant_sale.php";
			var act = $('#filter-type').val();
			var date = $('#datepick').val();
			window.open(downUrl+"?act="+act+"&date="+date);
			//return false;
		});

		$('#filter-form').submit(function(event) {
			event.preventDefault();
			$('#graph-notification').hide();
			$('#filter-notification').hide();
			$('#result-content').hide();
			if (act == '' || $('#datepick').val() == '') {
				$('#filter-notification').show();
			}else{
				$('body').modalmanager("loading");
				
				// ------------ GET TABLE TRANSACTION ---------------
				var formReport = {
					date: $('#datepick').val(),
					act: act
				}

				$.ajax({
					url: 'ajax/show_report_restaurant.php',
					type: 'POST',
					data: formReport,
				})
				.done(function(data) {
					// console.log("success");
					cek_modal++;
					$('#table-view-placer').find('#data_table').html(data);
					cekModalManager();
					if (data == '') {
						$('#filter-notification').show();
					};
				})
				.fail(function() {
					// console.log("error");
				})
				.always(function() {
					// console.log("complete");
				});

				// ------------ GET DETAIL TRANSACTION ---------------
				var formReportDetail = {
					date: $('#datepick').val(),
					act: act
				}

				$.ajax({
					url: 'ajax/show_report_customer.php',
					type: 'POST',
					data: formReportDetail,
				})
				.done(function(data) {
					// console.log("success");
					cek_modal++;
					$('#detail-view-placer').find('#data_table').find('tbody').html(data);
					cekModalManager();
					if (data == '') {
						$('#detail-notification').show();
					};

					$('.currency').autoNumeric('init', {
						aSign: 'IDR ',
						aPad: false
					});
				})
				
				.fail(function() {
					// console.log("error");
				})
				.always(function() {
					// console.log("complete");
				});

				if(act == 'monthviewrestaurant') {

					// ------------ GET GRAPH DATA MONTH---------------
					$.post("ajax/json_report_graph.php", {act: act, date: $('#datepick').val()}, function(data, textStatus) {
						if (data.length > 0) {
							$("a[href='#graph-view-placer']").on('shown', function (e) {
								$('#graph').empty();
								Morris.Line({
									element: 'graph',
								  data: data,
								  xkey: 'tanggal',
								  ykeys: ['amount'],
								  onlyIntegers: true,
								  labels: ['Income'],
								  grid: true,
								  smooth: false,
								  parseTime: false,
								  // hoverCallback: function (index, options, default_content, row) {$('.graph-detail').html(default_content);},
								  // yLabelFormat: function (y) { return "Rp. " + y.toString(); }
								});
							});
						} else {
							$('#graph-notification').show();
						}
					}, "json");

				}else if(act == 'yearviewrestaurant'){

					// ------------ GET GRAPH DATA YEAR---------------
					$.post("ajax/json_report_graph.php", {act: act, date: $('#datepick').val()}, function(data, textStatus) {
						if (data.length > 0) {
							$("a[href='#graph-view-placer']").on('shown', function (e) {
								$('#graph').empty();
								Morris.Line({
									element: 'graph',
								  data: data,
								  xkey: 'period',
								  ykeys: ['amount'],
								  onlyIntegers: true,
								  labels: ['Income'],
								  grid: true,
								  smooth: false,
								  parseTime: false,
								  // hoverCallback: function (index, options, default_content, row) {$('.graph-detail').html(default_content);},
								  // yLabelFormat: function (y) { return "Rp. " + y.toString(); }
								});
							});
						} else {
							$('#graph-notification').show();
						}
					}, "json");
				};
			};
		});
	});
</script>        